<template>
    <div class="app-container" v-loading="loading">
        <div class="action-container">
            <el-button  icon="el-icon-plus" size="small" type="primary" @click="openCreatedDialog">添加菜品</el-button>
          <!--<el-button  icon="el-icon-plus" size="small" type="primary" @click="openSpecDialog">规格添加</el-button>-->
          <!--<el-button  icon="el-icon-tickets" size="small" type="danger" @click="openSpecListDialog">规格列表</el-button>-->
          <el-button  icon="el-icon-refresh" size="small" @click="refresh">刷新</el-button>
          <div style="padding-top: 5px">
            <el-button  icon="el-icon-sort-up" type="primary" size="small" @click="changeIsUse(1)">上架</el-button>
            <el-button  icon="el-icon-sort-down" type="danger" size="small" @click="changeIsUse(2)">下架</el-button>
            <el-button  icon="el-icon-delete" size="small" @click="deleteFoods"></el-button>
          </div>

        </div>
      <div class="filter-container">
        <el-select v-model="query.foodType" clearable placeholder="食物品类">
          <el-option
            v-for="item in foodTypeOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="query.isUse" clearable placeholder="在架状态">
          <el-option
            v-for="item in isUseOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <el-input
          style="width: 200px"
          class="filter-item"
          placeholder="菜名"
          v-model="query.foodName" @keyup.enter.native="search"></el-input>
        <el-button type="primary" icon="el-icon-search" class="filter-item" @click="search">搜索</el-button>
        <el-button class="filter-item" @click="reset">重置</el-button>
      </div>
        <el-table
                :data="tableData"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
            <el-table-column
                    prop="name"
                    label="菜品名称" >
            </el-table-column>
          <el-table-column
            prop="foodTypeName"
            label="品类名称" >
          </el-table-column>
            <el-table-column
                    prop="money"
                    label="价格" >
            </el-table-column>
            <el-table-column
                    prop="virtualSellNum"
                    label="虚拟销售量" >
            </el-table-column>
          <el-table-column
            prop="actSellNum"
            label="实际销售量" >
          </el-table-column>
          <el-table-column
            prop="foodMaterial"
            label="原料介绍"
            >
          </el-table-column>
            <el-table-column
                    prop="remark"
                    label="备注">
            </el-table-column>
          <el-table-column
            prop="isUse"
            label="在架状态">
            <template slot-scope="scope">
              <template v-if="scope.row.isUse===1">在销售</template>
              <template v-else-if="scope.row.isUse===2">已下架</template>
            </template>
          </el-table-column>
            <el-table-column
                     label="图片"
            width="150">
                     <template slot-scope="scope">
                         <img :src="scope.row.logo" />
                     </template>
            </el-table-column>
          <el-table-column
            prop="rank"
            label="排序值"
            width="80"
            >
          </el-table-column>
            <el-table-column
                    label="编辑"
                    align="left" min-width="90">
                <template slot-scope="scope">
                  <el-button style="padding: 7px 27px;margin-left: 10px;margin-bottom: 3px"  size="mini" type="primary" icon="el-icon-edit" @click="openEditDialog(scope.row)">编辑</el-button>
                  <el-button style="margin-bottom: 3px" size="mini" icon="el-icon-plus" type="primary" @click="openSpecDialog(scope.row)">规格添加</el-button>
                  <el-button style="margin-bottom: 3px" icon="el-icon-tickets" size="mini" type="primary" @click="openSpecListDialog(scope.row)">规格列表</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
                :total-elements="totalElements"
                :change-callback="getFoodList"
                ref="page"></pagination>
        <el-dialog
                title="添加菜品"
                :visible.sync="createdDialog"
                :before-close="closeCreatedDialog">
            <el-form :model="form">
                <el-form-item label="品类选择" :label-width="formLabelWidth">
                    <el-select v-model="form.foodType" placeholder="请选择">
                      <el-option
                        v-for="item in foodTypeOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜品名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="价格" :label-width="formLabelWidth">
                    <el-input type="number" v-model="form.money"></el-input>
                </el-form-item>
                <el-form-item label="虚拟销量" :label-width="formLabelWidth">
                    <el-input type="text" v-model="form.virtualSellNum"></el-input>
                </el-form-item>
              <el-form-item label="原料介绍" :label-width="formLabelWidth">
                <el-input type="text" v-model="form.foodMaterial"></el-input>
              </el-form-item>
              <el-form-item label="排序值" :label-width="formLabelWidth">
                     <el-input type="number" v-model="form.rank"></el-input>
              </el-form-item>
                 <el-form-item label="备注" :label-width="formLabelWidth">
                     <el-input type="text" v-model="form.remark"></el-input>
                 </el-form-item>
                <el-form-item label="Logo" :label-width="formLabelWidth">
                    <el-upload
                            class="logo-uploader"
                            :action="url"
                            :data="filesData"
                            name="files"
                            :show-file-list="false"
                            :on-success="handleLogoSuccess"
                            :on-error = "handleLogoFailed"
                            :before-upload="beforeLogoUpload"
                            :headers="headers">
                        <img v-if="imgSrc" :src="imgSrc" class="logo">
                        <i v-else class="el-icon-plus logo-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeCreatedDialog">取 消</el-button>
                <el-button type="primary" @click="addFood" :loading="btnLoading">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog
                title="编辑信息"
                :visible.sync="editDialog"
                :before-close="closeEditDialog">
            <el-form :model="currentRow">
                <el-form-item label="品类选择" :label-width="formLabelWidth">
                    <el-select v-model="currentRow.foodType" placeholder="请选择">
                      <el-option
                        v-for="item in foodTypeOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜品名称" :label-width="formLabelWidth">
                    <el-input v-model="currentRow.name"></el-input>
                </el-form-item>
                 <el-form-item label="菜品价格" :label-width="formLabelWidth">
                     <el-input type="number" v-model="currentRow.money" ></el-input>
                 </el-form-item>
                  <el-form-item label="虚拟销量" :label-width="formLabelWidth">
                      <el-input v-model="currentRow.virtualSellNum"></el-input>
                  </el-form-item>
              <el-form-item label="原料介绍" :label-width="formLabelWidth">
                <el-input v-model="currentRow.foodMaterial"></el-input>
              </el-form-item>
                  <el-form-item label="备注" :label-width="formLabelWidth">
                       <el-input v-model="currentRow.remark"></el-input>
                  </el-form-item>
                <el-form-item label="排序值" :label-width="formLabelWidth">
                   <el-input type="number" v-model="currentRow.rank"  ></el-input>
                </el-form-item>
                  <el-form-item label="Logo" :label-width="formLabelWidth">
                        <el-upload
                                class="logo-uploader"
                                :action="url"
                                :data="filesData"
                                name="files"
                                :show-file-list="false"
                                :on-success="upfateLogoSuccess"
                                :on-error = "handleLogoFailed"
                                :before-upload="beforeLogoUpload"
                                :headers="headers">
                            <img v-if="updateSrc" :src="updateSrc" class="logo">
                            <i v-else class="el-icon-plus logo-uploader-icon"></i>
                        </el-upload>
                  </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeEditDialog">取 消</el-button>
                <el-button type="primary" @click="editFood" :loading="btnLoading">确 定</el-button>
            </div>
        </el-dialog>
      <el-dialog  title="规格添加"  :visible.sync="specDialog"  :before-close="closeSpecDialog">
        <el-form :model="specListForm" ref="specForm" :label-width="formLabelWidth" class="demo-dynamic" >
          <el-form-item
            v-for="(domain, index) in specListForm.list"
            :label="'规格' + index"
            :key="domain.key"
          >
            <el-input v-model="domain.lable" @blur="oneSpec(domain)" style='width:50%'></el-input>
            <el-radio v-model="domain.flag" label="2" border @change='changeFlag(domain)'>单选</el-radio>
            <el-radio v-model="domain.flag" label="1" border @change='changeFlag(domain)'>多选</el-radio>
            <el-button icon="el-icon-plus" size="small" type="primary" @click.prevent="addSubDomain(domain)">添加规格</el-button>
            <el-button icon="el-icon-delete" size="small" type="danger" @click.prevent="removeDomain(domain)">删除</el-button>
            <el-form-item
              v-for="(subDomains,idx) in domain.standardLevTwoList"
              :key="subDomains.key"
              style = 'display:inline-block'
            >
              <el-input v-model="subDomains.name" @blur="twoSpec(domain,subDomains)" style='width:95%;margin-top:10px;'>
                <el-button slot="append" icon="el-icon-close" @click.prevent="removeSubDomain(domain,subDomains)"></el-button>
              </el-input>
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-button @click="addDomain" icon="el-icon-plus" size="small" type="primary">添加规格</el-button>
          </el-form-item>
        </el-form>
        <!-- <div slot="footer" class="dialog-footer">
          <el-button @click="closeSpecDialog">取 消</el-button>
          <el-button type="primary" @click="addSpec" :loading="btnLoading">确 定</el-button>
        </div> -->
      </el-dialog>
      <el-dialog  title="规格列表" :visible.sync="specListDialog" :before-close="closeSpecListDialog">
        <el-form :model="specListForm" >

          <el-form-item :label="list.lable" v-for="(list,index) in specListForm.list" :key="list.key" :label-width="formLabelWidth">
            <span>(左边为规格,右边为附加金额)</span>
            <el-form-item v-for="(spec,idx) in list.standardLevTwoList" :key="spec.key">
              <el-input v-model="spec.name" :disabled="true" style='width:30%;margin-top:10px'></el-input>
              <el-input v-model="spec.money"  style='width:30%;'></el-input>
            </el-form-item>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeSpecListDialog">取 消</el-button>
          <el-button type="primary" @click="editSepc" :loading="btnLoading">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>
<script>
import {getFoodList, updateFood, addFood, deleteFoods,getSpecList,editPrice,addOneSpec,updateLevOne,removeLevOne,addTwoSpec,updateLevTwo,removeLevTwo,changeIsUse} from '@/modules/food/api/food'
import {getAllFoodTypeList} from '@/modules/food/api/foodType'
import pagination from '@/components/pagination/index'
export default {
  name: 'food',
  data () {
    return {
      tableData: [], // 表格数据
      totalElements: 0, // 数据条数
      multipleSelection: [], // 选中数据-多选
      loading: true, // loading效果
      createdDialog: false, // 菜品模态框
      formLabelWidth: '120px',
      url: this.publicUrl.filesUploadUrl,
      foodTypeOptions: [],
      isUseOptions:[
        {
          name:'在销售',
          id:'1'
        },
        {
          name:'已下架',
          id:'2'
        }
      ],
      query: {
        foodName:'',
        foodType:'',
        isUse:'',
      },
      specListForm:{
        list:[],
      },
      form: {
        name: '',
        money: '',
        virtualSellNum: '',
        foodType: '',
        remark: '',
        logo: '',
        rank: '',
        foodMaterial: ''
      }, // 菜品数据
      imgSrc: '',
      updateSrc: '',
      specListDialog:false,//规格列表模态框
      specDialog:false,//规格添加模态框
      btnLoading: false, // 按钮loading
      editDialog: false, // 编辑模态框,
      currentRow: {
        id: '',
        name: '',
        money: '',
        virtualSellNum: '',
        remark: '',
        logo: '',
        foodType: '',
        rank: '',
        foodMaterial: ''
      },
      filesData: {
        module: 'food'
      }, // 携带参数
      headers: {
        accessToken: sessionStorage.token
      } // 请求头部
    }
  },
  components: { pagination },
  created () {
    this.getFoodList()
    this.getFoodTypeList()
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleDelete (row) {
      this.multipleSelection.push(row)
      this.deleteFoods()
    },
    /*
    * 上下架操作 多操作
    * */
    changeIsUse: function (isUse){
      let msg
      if(isUse === 1){
        msg = '是否要上架这些食品？'
      }
      if(isUse === 2){
        msg = '是否要下架这些食品？'
      }
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.multipleSelection.length) {
          this.loading = true
          let ids = []
          this.multipleSelection.forEach((item) => {
            ids.push(item.id)
          })
          this.changeIsUseMethod(isUse,ids)
        } else {
          this.$message({
            message: '请选择食品',
            type: 'warning',
            duration: 1000
          })
        }
      })
    },
    //上下架方法类
    changeIsUseMethod(isUse,ids){
      changeIsUse(isUse,ids).then(response => {
        this.$message({
          message: response.msg,
          type: 'success',
          duration: 1000
        })
        this.multipleSelection = []
        this.$refs.page.refresh()
      }).catch(() => {
        this.loading = false
      })
    },



    /*
    * 获取菜品列表
    * */
    getFoodList: function (number, pageSize) {
      this.loading = true
      getFoodList(number, pageSize,this.query).then(response => {
        let data = response.obj.content
        this.tableData = data
        this.totalElements = response.obj.totalElements

        for (let i = 0; i < data.length; i++) {
          let imgArr = data[i].logo.split('&')
          data[i].logo = this.someImageUrl(imgArr)
        }

        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /*
    * 刷新
    * */
    refresh () {
      this.$refs.page.refresh()
    },
    // 获取所有口味
    getFoodTypeList: function () {
      getAllFoodTypeList().then(response => {
        this.foodTypeOptions = response.obj.content
      })
    },
    /*
    * 打开菜品模态框
    * */
    openCreatedDialog () {
      this.createdDialog = true
      this.form.logo='food/init/&88B027350D5A466F8277BEB92BBEF52F.png'
      let imgArr = this.form.logo.split('&')
      this.imgSrc = this.someImageUrl(imgArr)
      this.getFoodTypeList()
    },
    /*
    * 关闭菜品模态框
    * */
    closeCreatedDialog () {
      this.createdDialog = false
      this.form = {
        name: '',
        money: '',
        virtualSellNum: '',
        foodType: '',
        remark: '',
        logo: '',
        rank: ''
      } // 菜品数据
      this.imgSrc = ''
    },
    /*
    * 添加菜品
    * */
    addFood () {
      this.loading = true
      this.btnLoading = true
      addFood(this.form).then(response => {
        this.$message({
          message: response.msg,
          type: 'success'
        })
        this.btnLoading = false
        this.closeCreatedDialog()
        this.getFoodList()
      }).catch(() => {
        this.btnLoading = false
        this.loading = false
      })
    },
    /*
    * logo上传成功
    * */
    handleLogoSuccess (response, file) {
      this.$message({
        message: response.msg,
        type: 'success'
      })
      this.form.logo = response.obj
      let imgArr = response.obj.split('&')
      this.imgSrc = this.normalImageUrl(imgArr)
    },
    /*
    * logo上传成功
    * */
    upfateLogoSuccess (response, file) {
      this.$message({
        message: response.msg,
        type: 'success'
      })
      this.currentRow.logo = response.obj
      let imgArr = response.obj.split('&')
      this.updateSrc = this.normalImageUrl(imgArr)
      // this.imgSrc = this.testImageUrl(response.obj)
    },
    /*
    * logo上传失败
    * */
    handleLogoFailed () {
      this.$message({
        message: '图片上传失败',
        type: 'error'
      })
    },
    /*
    * 对logo类型、大小做限制
    * */
    beforeLogoUpload (file) {
      let isImage = file.type.substring(0, 5) === 'image'
      if (!isImage) {
        this.$message.error('只能上传图片')
        return false
      }
      return true
    },
    /*
    * 打开编辑模态框
    * */
    openEditDialog (row) {
      console.log(row)
      this.currentRow.id = row.id
      this.currentRow.name = row.name
      this.currentRow.money = row.money
      this.currentRow.virtualSellNum = row.virtualSellNum
      this.currentRow.remark = row.remark
      this.updateSrc = row.logo
      this.currentRow.foodType = row.foodType
      this.editDialog = true
      this.currentRow.rank = row.rank
      this.currentRow.foodMaterial = row.foodMaterial
      //console.log(this.currentRow.logo);
      this.getFoodTypeList()
    },
    /*
    * 关闭编辑模态框
    * */
    closeEditDialog () {
      this.editDialog = false
    },
    /*
    * 编辑
    * */
    editFood () {
      this.loading = true
      this.btnLoading = true;
      updateFood(this.currentRow).then(response => {
        this.$message({
          message: response.msg,
          type: 'success'
        })
        this.btnLoading = false
        this.loading = false;
        this.closeEditDialog()
        this.refresh()
      }).catch(() => {
        this.loading = false
        this.btnLoading = false
      })
    },
    /*
    * 删除食品
    * */
    deleteFoods () {
      this.$confirm('是否删除这些食物？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        if (this.multipleSelection.length) {
          this.loading = true
          let ids = []
          this.multipleSelection.forEach((item) => {
            ids.push(item.id)
          })
          deleteFoods(ids).then(response => {
            this.$message({
              message: response.msg,
              type: 'success',
              duration: 1000
            })
            this.multipleSelection = []
            this.$refs.page.refresh()
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.$message({
            message: '请选择食品',
            type: 'warning',
            duration: 1000
          })
        }
      })
    },
    // 获取规格列表
    getSpecList(){
      getSpecList(this.currentRow.id).then(response=>{
        this.specListForm.list = response.obj;
      }).catch(()=>{})
    },
    // 打开规格编辑框
    openSpecDialog(row){
      this.currentRow.id = row.id
      this.specDialog = true;
      this.getSpecList();
    },
    // 关闭规格编辑框
    closeSpecDialog () {
      this.specDialog = false;
      this.specListForm = {
        list: [],
      }
    },
    // 删除行规格
    removeDomain (item)  {
      let index = this.specListForm.list.indexOf(item)
      if (index !== -1) {
        if(this.specListForm.list[index].standardLevOneId != null){
           removeLevOne(this.specListForm.list[index].standardLevOneId).then(response=>{
            //console.log(response);
          }).catch(()=>{})
        }
        this.specListForm.list.splice(index, 1);
      }
    },
    // 添加行规格
    addDomain() {
      this.specListForm.list.push({
        standardLevTwoList:[{name: '',id:null}],
        lable: '',
        flag:"1",
        standardLevOneId:null,
        key: Date.now()
      });
    },
    // 添加列规格
    addSubDomain (item) {
      let index = this.specListForm.list.indexOf(item)
      this.specListForm.list[index].standardLevTwoList.push({
        name: '',
        id:null,
        key: Date.now()
      });
    },
    // 删除列规格
    removeSubDomain(domain,item) {
      let index = this.specListForm.list.indexOf(domain)
      let idx = this.specListForm.list[index].standardLevTwoList.indexOf(item)
      if (index !== -1 && idx !== -1) {
        if(this.specListForm.list[index].standardLevTwoList[idx].id != null){
          removeLevTwo(this.specListForm.list[index].standardLevTwoList[idx].id).then(response=>{
          }).catch(()=>{})
        }
        this.specListForm.list[index].standardLevTwoList.splice(idx, 1)
      }
    },
    // 添加规格
    addSpec(){
      this.loading = true
      this.btnLoading = true
      let specForm = this.specListForm.list;
      let data = '';
      let re = new RegExp(/\S/);
      for(let i=0;i<specForm.length;i++){
        if(re.test(specForm[i].lable)){
          data = data + specForm[i].flag + '-' + specForm[i].lable;
          let count = 0;
          for(let j=0;j<specForm[i].standardLevTwoList.length;j++){
            if(re.test(specForm[i].standardLevTwoList[j].name)){
              data = data + '-' + specForm[i].standardLevTwoList[j].name;
              count++;
            }else{
              data = ''
              break;
            }
          }
          if(count>=specForm[i].standardLevTwoList.length){
            data += ';';
          }else{
            data = ''
            break;
          }
        }else{
          break;
        }
      }
      if(!re.test(data) && this.specListForm.list.length != 0){
        this.$message({
          message: "请填写规格名称",
          type: 'error'
        })
        this.loading = false;
        this.btnLoading = false;
      }else{
        addSpec(this.currentRow.id,data).then(response=>{
          this.$message({
            message: response.msg,
            type: 'success'
          })
          this.btnLoading = false
          this.loading = false;
          this.closeSpecDialog()
        }).catch(()=>{
          this.loading = false;
          this.btnLoading = false;
        })
      }
    },
    // 打开规格列表
    openSpecListDialog(row){
      this.currentRow.id = row.id
      this.specListDialog = true;
      this.getSpecList();
    },
    // 关闭规格列表
    closeSpecListDialog(){
      this.specListDialog = false;
      this.specListForm ={
        list:[],
      }
    },
    // 修改规格价格
    editSepc(){
      let specForm = this.specListForm.list;
      let data = '';
      this.btnLoading = true;
      for(let i=0;i<specForm.length;i++){
        for(let j=0;j<specForm[i].standardLevTwoList.length;j++){
          data = data + specForm[i].standardLevTwoList[j].id + '-' + specForm[i].standardLevTwoList[j].money + ';';
        }
      }
      editPrice(data).then(response=>{
        this.$message({
          message: response.msg,
          type: 'success'
        })
        this.btnLoading = false;
        this.closeSpecListDialog();
      }).catch(()=>{
        this.btnLoading = false;
      })
    },
    //添加一级规格名称
    oneSpec(item){
      let index = this.specListForm.list.indexOf(item);
      let re = new RegExp(/\S/);
      if(re.test(item.lable)){
        if(item.standardLevOneId == null){
          //添加规格名称
          //console.log(this.currentRow.id);
          addOneSpec(this.currentRow.id,item.flag,item.lable).then(response=>{
            this.specListForm.list[index].standardLevOneId = response.obj.id;
            //console.log(response);
          }).catch(()=>{})
        }else{
          //编辑规格名称
          updateLevOne(item.standardLevOneId,item.lable,item.flag).then(response=>{
            //console.log(response);
          }).catch(()=>{})
        }
      }else{
        this.$message({
          message: "请填写规格名称",
          type: 'error'
        })
      }
    },
    //添加二级规格名称
    twoSpec(domain,item){
      let index = this.specListForm.list.indexOf(domain)
      let idx = this.specListForm.list[index].standardLevTwoList.indexOf(item);
      //console.log(domain,item);
      let re = new RegExp(/\S/);
      if(re.test(item.name)){
        if(domain.standardLevOneId == null){
           this.$message({
              message: "请先填写一级规格名称",
              type: 'error'
            })
        }else{
          if(item.id == null){
            //添加二级规格名称
            addTwoSpec(domain.standardLevOneId,item.name).then(response=>{
              //console.log(response);
              this.specListForm.list[index].standardLevTwoList[idx].id = response.obj.id;
            }).catch(()=>{})
          }else{
            //编辑二级规格名称
            updateLevTwo(item.id,item.name).then(response=>{
              //console.log(response);
            }).catch(()=>{})
          }
        }
      }else{
         this.$message({
          message: "请填写二级规格名称",
          type: 'error'
        })
      }
    },
    //
    changeFlag(item){
      console.log(item);
      if(item.standardLevOneId != null){
        //编辑规格名称
        updateLevOne(item.standardLevOneId,item.lable,item.flag).then(response=>{
          console.log(response);
        }).catch(()=>{})
      }
    },
    reset () {
      this.query = {
        foodName: '',
        foodType: '',
      }
      this.$refs.page.search()
    },
    /*
    * 搜索
    * */
    search () {
      this.$refs.page.search()
    },
  }
}
</script>

<style scoped>
    .logo-uploader {
        display: inline-block;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .logo-uploader:hover {
        border-color: #409EFF;
    }
    .logo-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .logo {
        width: 178px;
        height: 178px;
        display: block;
    }

</style>
